<template>
  <div class="rankAll">
    <div class="rankMonth active rankSitutation">
      <p>
        {{id}}
      </p>
      <div class="rankListItem flexs">
          <span class="rankHoner">
              <img src="../../static/images/1st.png" alt="">
          </span>
          <p class="rankDepartemnt flex1">
            喵了个咪11111
          </p>
          <span class="totalScore"> 143</span>
      </div>
        <div class="rankListItem flexs">
            <span class="rankHoner">
              <img src="../../static/images/2st.png" alt="">
          </span>
            <p class="rankDepartemnt flex1">
              15377539999
            </p>
        <span class="totalScore"> 78</span>
      </div>
      <div class="rankListItem flexs">
            <span class="rankHoner">
              <img src="../../static/images/3st.png" alt="">
            </span>
            <p class="rankDepartemnt flex1"> 15541274541</p>
            <span class="totalScore">52</span>
      </div>
    </div>
  </div>
</template>
<script>

  export default({
      data (){
          return {

          }

      },
    props:{
          id:{

          }
    }
  })
</script>
<style scoped>
  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .rankAll{
    position: relative;
    padding: 0 0.32rem;

  }
  .rankAll .rankWeek,.rankAll .rankMonth{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    display: none;

  }
  .rankAll>div.active{
    display: block;
  }
  .rankListItem{
    height: 0.75rem;
    padding: 0.25rem 0;
    margin: 0 0.32rem;
    border-bottom: 0.03rem solid #f6f5f5;
  }
  .rankListItem .rankHoner{
    width: 0.75rem;
    height: 0.65rem;

  }
  .rankListItem .rankHoner img{
    vertical-align: middle;
    width: 0.49rem;
    height: 0.59rem;
  }
  .rankListItem .rankHoner {
    font-size: 0.3rem;
    color: #474646;
    width: 0.9rem;
    text-align: left;
  }

  .rankListItem .rankHoner cite{
    margin-left: 8px;
    font-style: normal;
  }
  .rankListItem  .rankDepartemnt{
    text-align: left;
    font-size: 0.3rem;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;
    line-height: 2.2;
  }
  .rankListItem  .totalScore{
    width: 0.75rem;
    text-align: right;
    font-size: 0.28rem;
    color: #ed5b53;
  }
  .rankListItem .rankHoner span{
    margin-left: 0.3rem;
  }
</style>
